<template>
  <div>
    <div class="style-title">{{title}}</div>
    <div class="style-line"></div>
    <template v-for="item in elements">

      <!-- text 组合 -->
      <template v-if="item.type=='textGroup'">
        <el-form-item :label="item.label">
          <template v-for="(gItem,gIndex) in item.group">
            <span v-if="gIndex > 0"> - </span>
            <el-input v-model="gItem.value" :placeholder="gItem.placeholder" :disabled="disabled" :style="gItem.style">
            </el-input>
          </template>
        </el-form-item>
      </template>

      <!-- radio -->
      <template v-else-if="item.type=='radio'">
        <el-form-item :label="item.label">
          <el-radio-group v-model="item.value" :placeholder="item.placeholder" :disabled="disabled">
            <el-radio v-for="r in item.actions" :label="r" :key="r">{{r}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>

      <!-- checkbox -->
      <template v-else-if="item.type=='checkbox'">
        <el-form-item :label="item.label">
          <el-checkbox-group v-model="item.value" :placeholder="item.placeholder" :disabled="disabled">
            <el-checkbox v-for="i in item.actions" :label="i" :key="i">{{i}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </template>

      <!-- select -->
      <template v-else-if="item.type=='select'">
        <el-form-item :label="item.label">
          <el-input v-model="item.value" :placeholder="item.placeholder" :disabled="disabled" :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </template>

      <!-- text -->
      <template v-else-if="item.type=='text'">
        <el-form-item :label="item.label">
          <el-input v-model="item.value" :placeholder="item.placeholder" :disabled="disabled" :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </template>

      <template v-else-if="item.type=='img'">
        <el-form-item :label="item.label">
          <img :src="item.value" style="width: 100%; height: 180px;"/>
        </el-form-item>
      </template>

    </template>

  </div>
</template>
<script>
  export default {
    props: {
      disabled: Boolean,
      title: String,
      elements: Array
    },
    data() {
      return {
        // disabled: false,
        // title: '标签',
        // elements: [{
        //     label: '性别',
        //     type: 'radio',
        //     value: undefined,
        //     actions: ['不限','男', '女'],
        //     placeholder: '请选择性别'
        //   },
        //   {
        //     label: '省份',
        //     type: 'select',
        //     value: undefined,
        //     actions: ['湖北省', '湖南省', '北京'],
        //     placeholder: '请选择省份'
        //   },
        //   {
        //     label: '年龄',
        //     type:'textGroup',
        //     group: [{
        //       type: 'text',
        //       value: undefined,
        //       style: {
        //         width: '48%'
        //       }
        //     }, {
        //       type: 'text',
        //       value: undefined,
        //       style: {
        //         width: '48%'
        //       }
        //     }]
        //   }
        // ],

      }
    }
  }
</script>
<style scoped lang="scss">
  /deep/.el-dialog__body {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
  }

  .style-title {
    color: #333;
    position: relative;
    font-size: 18px;
    padding-left: 10px;
  }

  .style-title::before {
    content: '';
    display: block;
    width: 4px;
    height: 16px;
    background-color: #007BFF;
    border-radius: 10px;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 1;
  }

  .style-line {
    background-color: #f1f1f1;
    width: 100%;
    height: 3px;
    margin: 10px 0;
    border-radius: 10px;
  }

  .el-form-item--mini.el-form-item {
    margin-bottom: 10px;
  }
</style>
